<template>
  <div class="container">
    <heared @newList="newList" :currentPage="currentPages"></heared>
    <div class="separate">
      <i class="el-alert__icon el-icon-info"></i>
      数据一共{{ sum }}条
    </div>
    <footerd
      @getsum="getsum"
      :newList="newLists"
      @currentPage="currentPage"
    ></footerd>
  </div>
</template>

<script>
import heared from '../components/questions-header.vue'
import footerd from '../components/questions-footer.vue'
export default {
  data () {
    return {
      sum: '',
      newLists: [],
      currentPages: 1
    }
  },
  // 计算属性
  computed: {},
  components: {
    heared,
    footerd
  },
  methods: {
    getsum (value) {
      this.sum = value
    },
    currentPage (value) {
      this.currentPages = value
    },
    newList (value) {
      this.newLists = value
    }
  },
  props: {},
  // 监听
  watch: {
    // immediate: true 刚加载就进行监听
    newList (newVal) {
      this.sum = newVal.length
    }
  },
  created () {},
  mounted () {}
}
</script>

<style scoped lang="scss">
.container {
  margin-top: 15px;
  margin-left: 15px;
  margin-bottom: 15px;
  box-shadow: 1px 1px 1px#ccc;
  padding: 20px;
  width: 1320px;
  background-color: #fff;
  .separate {
    background-color: #f4f4f5;
    color: #909399;
    font-size: 13px;
    height: 34px;
    line-height: 34px;
    width: 100%;
    margin-bottom: 15px;
    .el-alert__icon {
      margin-right: 5px;
      margin-left: 16px;
    }
  }
}
</style>
